<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>基于 layui 的极简社区页面模版</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="fly,layui,前端社区">
		<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
		<link rel="stylesheet" href="../res/layui/css/layui.css">
		<link rel="stylesheet" href="../res/css/global.css">
		<link rel="stylesheet" href="../layer/mobile/need/layer.css" />
		<script type="text/javascript" src="../layer/layer.js"></script>
		<script type="text/javascript" src="../res/js/jquery-1.11.3.min.js"></script>
		<style type="text/css">
			.fly-avatar img {
				width: 60px;
				height: 60px;
				border-radius: 100%;
			}
			/*隐藏滚动条*/
			
			body {
				background: #ffffff;
				overflow-x: hidden;
				overflow-y: hidden;
			}
			
			.fly-list li {
				height: 100%;
				margin-top: 10px;
			}
			
			.fly-list-info {
				margin-left: 16px;
			}
			
			.fly-list li h2 {
				margin-left: 85px;
				margin-top: 9px;
			}
			
			.fly-list li h2 a {
				padding-top: 15px;
				margin-top: 10px;
			}
			
			.layui-textarea {
				min-height: 20px;
				width: 90%;
				margin-left: 10px;
				margin-bottom: 10px;
			}
			
			.fly-column .layui-container .layui-clear li a{
				font-size: 22px;
				
			}
		</style>
	</head>

	<body style="margin-top: 10px;">
		<div class="fly-panel fly-column">
			<div class="layui-container">
				<ul class="layui-clear">
					<li class="layui-hide-xs layui-this">
						<a href="/">动态</a>
					</li>
					
					<li>
						<a href="jie/index.html">分享<span class="layui-badge-dot"></span></a>
					</li>
				
					<li>
						<a href="jie/index.html">笑话</a>
					</li>
					<li>
						<a href="jie/index.html">消息</a>
					</li>
					

				</ul>

			</div>
		</div>

		
		<div class="layui-container">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md8">
					<div class="fly-panel">

						<ul class="fly-list" id="LAY_demo1">
							<li>
								<div>
									<a href="#" class="fly-avatar">
										<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
									</a>
									<h2>
                                    <a >  <cite style="color: #403e3b;">ArryLuo</cite><br/>
                                    	
                                  	<span style="position: absolute;  padding-right: 0!important;margin-top: 6px;"> 
                                  		
                                   	<cite style="font-style: italic; color: #999; "><font size="2.5">2017-12-02</font></cite>
                                      </span>
                                    </a>
              			
                                  </h2>
								</div>
								<div style="margin-top: 60px;">
									<div class="layui-colla-content layui-show">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。

										<div class="site-demo-flow" id="LAY_demo3" style="margin-top: 5px;">
											<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876">

										</div>
										<!--进行点赞的处理-->
										<div class="jieda-reply">
											<span class="jieda-zan zanok" type="zan">
                                           <i class="iconfont icon-zan"></i>
                                              <em>66</em>
                                               </span>
											<span type="reply" class="tophuifu">
                                             <i class="iconfont icon-svgmoban53"></i>
                                                                                           回复
                                                 </span>
											<!--<div class="jieda-admin">
												<span type="edit">编辑</span>
												<span type="del">删除</span>
												<!-- <span class="jieda-accept" type="accept">采纳</span>
											</div>-->
										</div>
									</div>

									<!--在这里编写评论列表-->
									<div class="layui-colla-content layui-show" style="padding:5px 15px">
										<!--点赞列表-->
										<div>
											<i class="iconfont icon-zan"></i>
											<a href class="fly-link"><cite><font size="2.5">马云、</font></cite></a>
											<a href class="fly-link"><cite><font size="2.5">马化腾、</font></cite></a>
											<a href class="fly-link"><cite><font size="2.5">雷军、</font></cite></a>
											<a href class="fly-link"><cite><font size="2.5">李彦宏</font></cite></a>
											<span href class="fly-link"><cite><font size="2.5">等4人点赞</font></cite></span>
										</div>
										<ul>
											<li>
												<!--一级评论开始-->
												<div class="detail-about detail-about-reply">
													<!--<a class="fly-avatar" href="" style="left: 15px;">
														<img src="../res/images/a.jpg" class="layui-nav-img" style="margin-right:4px;width: 30px;height: 30px;">
													</a>-->
													<div>
														<span class="fly-link">
															<cite>马云</cite><span style="padding-left: 5px; color: #000000;">:</span>

														</span>

														<span style="color: #000000;">小伙子可以啊，明天直接到我公司报道吧小伙子可以啊，明天直接到我公司报道吧小伙子可以啊，明天直接到我公司报道吧</span>

													</div>
													<div class="detail-hits" style="margin-bottom: 5px;">
														<span>2017-11-30</span>
														<span type="reply" class="huifu">
                                                <i class="iconfont" title="回复" style="cursor: pointer;"></i>
                                                            </span>
													</div>
													<!--二级评论-->
													<div>
														<!--下面循环评论列表-->
														<div class="detail-about detail-about-reply" style="margin-top: 5px;">
															<!--<a class="fly-avatar" href="" style="left: 10px;">
																<img src="../res/images/a.jpg" class="layui-nav-img" style="margin-right:4px;width: 30px;height: 30px;">
															</a>-->
															<div>
																<span class="fly-link">
															<cite>马化腾<span style="color: #000000;">回复</span>马云</cite><span style="padding-left: 5px; color: #000000;">:</span>

																</span>

																<span style="color: #000000;">这小伙子我要了，别跟我抢</span>

															</div>
														</div>
														<div class="detail-hits" style="margin-bottom: 10px;margin-top: 0px;margin-left: 50px;">
															<span>2017-11-30</span>
															<span type="reply" class="huifu">
                                                <i class="iconfont" title="回复"style="cursor: pointer;"></i>
                                                            </span>
														</div>
														<!--第二循环-->
														<div class="detail-about detail-about-reply" style="margin-top: 5px;">
															<!--<a class="fly-avatar" href="" style="left: 10px;">
																<img src="../res/images/e.jpg" class="layui-nav-img" style="margin-right:4px;width: 30px;height: 30px;">
															</a>-->
															<div>
																<span class="fly-link">
															<cite>马云<span style="color: #000000;">回复</span>马化腾</cite><span style="padding-left: 5px; color: #000000;">:</span>

																</span>

																<span style="color: #000000;">mdzz</span>

															</div>
														</div>
														<div class="detail-hits" style="margin-bottom: 10px;margin-top: 0px;margin-left: 50px;">
															<span>2017-11-30</span>
															<span type="reply" class="huifu">
                                                <i class="iconfont" title="回复"style="cursor: pointer;"></i>
                                                            </span>
														</div>
													</div>
													<!--二级评论结束-->
												</div>
												<!--一级评论开始结束-->

												<!--<div>
													<!--一级评论人
													<img src="http://t.cn/RCzsdCq" class="layui-nav-img" style="    margin-right:4px">
													<span>马云:</span>小伙子可以啊，明天直接到我公司报道吧小伙子可以啊，明天直接到我公司报道吧小伙子可以啊，明天直接到我公司报道吧
												</div>-->
											</li>
											<!--第二个人评论-->

										</ul>
									</div>
									<div class="fly-list-info">
										<i class="iconfont icon-pinglun1" title="评论" style="cursor: pointer;">
											<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
											
										</i>

									</div>
									<div class="fly-list-badge">

									</div>
								</div>
							</li>
							<li>
								<div>
									<a href="#" class="fly-avatar">
										<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
									</a>
									<h2>
                                    <a >  <cite style="color: #403e3b;">ArryLuo</cite><br/>
                                    	
                                  	<span style="position: absolute;  padding-right: 0!important;margin-top: 6px;"> 
                                  		
                                   	<cite style="font-style: italic; color: #999; "><font size="2.5">2017-12-02</font></cite>
                                      </span>
                                    </a>
              			
                                  </h2>
								</div>
								<div style="margin-top: 60px;">
									<div class="layui-colla-content layui-show">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。

										<div class="site-demo-flow" id="LAY_demo3" style="margin-top: 5px;">
											<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876">
											<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876">

										</div>
									</div>
									<div class="fly-list-info">
										<i class="iconfont icon-pinglun1" title="评论" style="cursor: pointer">
											<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
											
										</i>

										<!--   <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                <i class="layui-badge fly-badge-vip">VIP3</i>
              </a>-->
										<!-- <span>刚刚</span>-->

										<!--<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
									<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
										<!--	<span class="fly-list-nums"> 
                                   	<cite>2017-12-02</cite>
                                      </span>-->
									</div>
									<div class="fly-list-badge">

									</div>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>

		</div>
		</div>

		<script src="../res/layui/layui.js"></script>
		<script>
			layui.use('flow', function() {
				var flow = layui.flow;
				flow.load({
					elem: '#LAY_demo1' //流加载容器

					,
					done: function(page, next) { //执行下一页的回调
						var sum = 0;
						console.log(page);
						//模拟数据插入
						console.log("1");
						setTimeout(function() {
							var lis = [];
							for(var i = 0; i < 1; i++) {
								//这里替换成上面的ul下面的li就可以实现下来加载了
								var html = '<li class="layui-timeline-item">' +
									'<i class="layui-icon layui-timeline-axis"></i>' +
									'<div class="layui-timeline-content layui-text">' +
									'<h3 class="layui-timeline-title">2017/8/15 <span class="layui-text">12:12:59</span></h3>' +
									'<div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>' +
									'</div>' +

									'<div class="layui-timeline-content layui-text">' +

									'<img layer-pid="图片id，可以不写" class="layui-nav-img" layer-src="img/a.jpg" src="img/a.jpg" alt="图片名">' +
									'<img layer-pid="图片id，可以不写" class="layui-nav-img" layer-src="img/b.jpg" src="img/b.jpg" alt="图片名">' +
									'<img layer-pid="图片id，可以不写" class="layui-nav-img" layer-src="img/a.jpg" src="img/a.jpg" alt="图片名">' +
									'<img layer-pid="图片id，可以不写" class="layui-nav-img" layer-src="img/b.jpg" src="img/b.jpg" alt="图片名">' +
									'</div>' +

									'</li>';
								lis.push(html)
							}

							//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
							//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
							next(lis.join(''), page < 1); //假设总页数为 10
							//popimg();
						}, 500);
					}
				});
			});
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.photos({
					photos: '#LAY_demo3',
					anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
				});

			});
			//笔的点击事件

			/*	$(function() {
						//初始化进来全部将回复进行隐藏掉
						
					})*/
			//点击评论
			$(".huifu").off().on("click", function(e) {
				$(this).parents(".layui-colla-content").next().children(".iconfont").children(".layui-textarea").next().remove();
				var html = '<div class="layui-input-block">' +
					'<button class="layui-btn" lay-submit=""  lay-filter="demo1" id="save">立即提交</button>' +
					'<button type="reset" class="layui-btn layui-btn-primary">取消</button></div>';
				$(this).parents(".layui-colla-content").next().children(".iconfont").children(".layui-textarea").after(html);
				$(this).parents(".layui-colla-content").next().children(".iconfont").children(".layui-textarea").css("min-height", "100px");
				$(this).parents(".layui-colla-content").next().children(".iconfont").children(".layui-textarea").focus();
				save(); //保存
				cenl(); //取消
				e.stopPropagation();
			});
			//头部的回复
			$(".tophuifu").off().on("click", function(e) {
				$(this).parents(".layui-colla-content").parent("div").children(".fly-list-info").children(".iconfont").children(".layui-textarea").next().remove();
				var html = '<div class="layui-input-block">' +
					'<button class="layui-btn" lay-submit=""  lay-filter="demo1" id="save">立即提交</button>' +
					'<button type="reset" class="layui-btn layui-btn-primary">取消</button></div>';
				$(this).parents(".layui-colla-content").parent("div").children(".fly-list-info").children(".iconfont").children(".layui-textarea").after(html);
				$(this).parents(".layui-colla-content").parent("div").children(".fly-list-info").children(".iconfont").children(".layui-textarea").css("min-height", "100px");
				$(this).parents(".layui-colla-content").parent("div").children(".fly-list-info").children(".iconfont").children(".layui-textarea").focus();

				save(); //保存
				cenl(); //取消
				e.stopPropagation();
			});
			$(".reply").css("display", "none");
			//鼠标悬浮事件
			$(".reply").off().on("mouseover", function() {
				alert("11");
				$(".reply").css("display", "block");
			});
			//点击其他地方进行收起\n
			$(".layui-colla-content").off().on("click", function(e) {

				$(".layui-input-block").remove();
				$(".layui-textarea").css("min-height", "20px");
				e.stopPropagation();
			});

			$(".layui-textarea").off().on("click", function(e) {

				$(this).next().remove()
				var html = '<div class="layui-input-block">' +
					'<button class="layui-btn" lay-submit=""  lay-filter="demo1" id="save">立即提交</button>' +
					'<button type="reset" class="layui-btn layui-btn-primary">取消</button></div>';
				$(this).after(html);
				$(this).css("min-height", "100px");
				e.stopPropagation();
				save(); //保存
				cenl(); //取消
			});
			var save = function() {
					$(".layui-col-md8 li #save").off().on("click", function(e) {
						e.stopPropagation();
						console.log("11");
						$(".layui-input-block").remove();
						$(".layui-textarea").css("min-height", "20px");
					});
				}
				//重置
			var cenl = function() {
				$(".layui-btn").off().on("click", function(e) {
					e.stopPropagation();
					console.log("22");
					$(".layui-input-block").remove();
					$(".layui-textarea").css("min-height", "20px");
				});
			}

			/*var html = '<div style="padding: 10px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
				'评论<textarea placeholder="请输入内容" class="layui-textarea"></textarea></div>';*/

			/*$(".icon-pinglun1").off().on("click", function() {
					layer.open({
						type: 1,
						title: false //不显示标题栏
							,
						closeBtn: false,
						area: '300px;',
						shade: 0.8,
						id: 'LAY_layuipro' //设定一个id，防止重复弹出
							,
						resize: false,
						btn: ['确认', '取消'],
						btnAlign: 'c',
						moveType: 1 //拖拽模式，0或者1
							,
						content: html,
						success: function(layero) {
							var btn = layero.find('.layui-layer-btn');
							btn.find('.layui-layer-btn0').attr({
								href: 'http://47.94.254.90/arryblog/',
								target: '_blank'
							});
						}
					});
				})*/
			//调用示例
		</script>
		<script>
			layui.cache.page = '';
			layui.cache.user = {
				username: '游客',
				uid: -1,
				avatar: '../res/images/avatar/00.jpg',
				experience: 83,
				sex: '男'
			};
			layui.config({
				version: "3.0.0",
				base: '../res/mods/' //这里实际使用时，建议改成绝对路径
			}).extend({
				fly: 'index'
			}).use('fly');
		</script>

		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
			document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));
		</script>

	</body>

</html>